<template>
  <div class="m_header">
    <div class="m_back text_overflow">
      <div v-auth="'home:exit'" @click="back">
        <a-button type="text" class="m_back_button">
          <span class="text_b">&lt;&lt;&lt;&lt;</span>
        </a-button>
        <span class="text_b">返回管理平台</span>
      </div>
    </div>
    <div class="text_a">
      <!-- <img class="logo" :src="baseURL + web_logo" /> -->
      <webLogo class="logo"></webLogo>
      <span class="text_c">
        <webName></webName>
      </span>
    </div>
    <div class="datetime text_overflow">
      <div class="time">
        <div class="date">{{ datetimenow[2] }}</div>
        {{ datetimenow[0] }}
        <span v-show="datetimenow[1]">周</span>
        {{ datetimenow[1] }}
        <span>&gt;&gt;&gt;&gt;</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import moment from "moment";
import { defineComponent, ref, onUnmounted } from "vue";
import { router } from "@/router";
import { com } from "@/utils/rw/common";
import webName from '@/components/rw/web_name.vue'
import webLogo from '@/components/rw/web_logo.vue'
export default defineComponent({
  name: "monitorHeader",
  components: {
    webName,
    webLogo
  },
  setup() {
    const datetimenow = ref([]);
    let timer = ref<NodeJS.Timeout | undefined>();
    let toTimer = null;
    const web_logo = "";
    timer.value = setInterval(() => {
      let now = moment(new Date());
      datetimenow.value = [
        now.format("HH:mm:ss"),
        com.getWeek(now.format("d")),
        now.format("YYYY年MM月DD日"),
      ];
    }, 1000);

    const back = () => {
      location.href = "/"
      // setTimeout(() => {
      //   location.reload();
      // }, 100);
    };

    onUnmounted(() => {
      clearTimeout(toTimer);
    });

    return {
      back,
      datetimenow,
      web_logo,

    };
  },
});
</script>

<style lang="scss" scoped>
.m_header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 40px;
  background-image: url("../../assets/ruijin/images/Topoflargescreen.png");
  background-size: 100% 100%;

  .text_overflow {
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m_back {
    width: 25%;
    padding-left: 30px;

    .m_back_button {
      border: none;
      outline: none;
      background-color: transparent;
      color: #fff;
      cursor: pointer;

      .el-icon-d-arrow-left {
        font-size: 13px;
      }
    }

    .text_b {
      background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
      background-clip: text;
      color: transparent;
      font-family: TRENDS;
      font-size: 15px;
      font-weight: 600;
    }
  }

  .text_a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
    background-clip: text;
    color: transparent;
    font-family: TRENDS;
    text-align: center;

    .logo {
      width: 40px;
    }

    .text_c {
      font-size: 25px;
      font-weight: 600;
    }
  }

  .datetime {
    width: 25%;
    background: linear-gradient(to bottom, #3fffea 0%, #35eaed 50%, #0e9afa 100%);
    background-clip: text;
    color: transparent;
    font-family: TRENDS;
    font-size: 15px;
    font-weight: 600;
    text-align: center;

    .date {
      display: inline-block;
    }
  }
}
</style>
